<template>
  <div :class="className" :style="{height:height,width:width}" ref="myEchart">
  </div>
</template>
<script>
  import SxEvaluateRecordApi from '@/api/manage/SxEvaluateRecordApi';
  import echarts from 'echarts'

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object
      }
    },
    data() {
      return {
        chart: null,
        huaz: null
      }
    },
    mounted() {
      this.fetchData()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      fetchData() {
        let that = this;
        this.$http.all([SxEvaluateRecordApi.count()])
          .then(this.$http.spread(function (data) {

            that.initChart(data);
          }));
      },
      initChart(data) {
        this.chart = echarts.init(this.$refs.myEchart, 'light')
        // 把配置和数据放这里
        this.chart.setOption({
          legend: {data: ['化妆评价', '摄影评价', '修片评价', '服装评价', '服务评价']},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['未评价','一星', '二星', '三星', '四星', '五星']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '化妆评价',
              type: 'bar',
              data: data.hz
            },
            {
              name: '摄影评价',
              type: 'bar',
              data: data.sy
            },
            {
              name: '修片评价',
              type: 'bar',
              data: data.xp
            },
            {
              name: '服装评价',
              type: 'bar',
              data: data.fz
            },
            {
              name: '服务评价',
              type: 'bar',
              data: data.fw
            }
          ]
        })
      }
    }
  }
</script>
